import React, { Component } from 'react';

// 封装高阶组件
const SubFn = (Comp, tit, age, time) => {
  return class extends Component {
    state = {
      msg: tit
    }
    render() {
      return <Comp msg={this.state.msg} />
    }
    componentDidMount() {
      setTimeout(() => {
        this.setState({ msg: age })
      }, time)
    }
  }
}

class Sub1 extends Component {

  render() {
    return (
      <div>文字为:{this.props.msg}</div>
    )
  }
}
class Sub2 extends Component {


  render() {
    return (
      <div>蚊子为:{this.props.msg}</div>
    )
  }
}

const MySub1 = SubFn(Sub1, '您好世界1', "Hello world-1", 2000)
const MySub2 = SubFn(Sub2, '您好世界2', "Hello world --2", 4000)

class App1 extends Component {
  render() {
    return (
      <div>
        <MySub1 />
        <MySub2 />
      </div>
    );
  }
}

export default App1;
